<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form onsubmit="handleSubmit()">
        <div>姓名：<input type="text" id="name"/></div>
        <div>班级：
            <select id="klass">
                <option value=""></option>
                <option value="1">JAVA班</option>
                <option value="2">WEB班</option>
            </select>
        </div>
        <div>
            性别：
            男<input type="radio" name="sex" value="1">
            女<input type="radio" name="sex" value="2">
        </div>
        <div>
            运动：
            足球<input type="checkbox" name="sport" value="1">
            篮球<input type="checkbox" name="sport" value="2">
            羽毛球<input type="checkbox" name="sport" value="3">
        </div>
        <div>
            备注：<textarea name="remark" id="remark"></textarea>
        </div>
        <input type="submit" value="提交">
        <input type="button" onclick="handleSet()" value="填值">
    </form>

    <script>

        let name = document.querySelector("#name");
        let klass = document.querySelector("#klass");
        let sexes = document.querySelectorAll("[name='sex']");
        let sports = document.querySelectorAll("[name='sport']");
        let remarkObj = document.querySelector("#remark");

        function handleSubmit() {
            window.event.preventDefault();

            let stu = {};
            stu.name = name.value;
            // 下拉框，可以直接使用.value属性获取选择值
            stu.klass = klass.value;

            // 单选框，只能先获取数组，然后遍历选中项，再获取值
            stu.sex = "";
            for (let v of sexes) {
                if (v.checked) {
                    stu.sex = v.value;
                    break;
                }
            }

            // 多选框，只能先获取数组，再遍历获取值
            stu.sports = [];
            for (let v of sports) {
                if (v.checked) {
                    stu.sports.push(v.value);
                }
            }

            stu.remark = remarkObj.value;

            let str = "";
            // 表单如果没有填值提交，那么获取的值是""
            if (stu.name == "") {
                str += "请填写姓名\r\n";
            }  
            if (stu.klass == "") {
                str += "请选择班级\r\n";
            } 
            if (stu.sex == "") {
                str += "请选择性别\r\n";
            }  
            if (stu.sports.length == 0) {
                str += "请选择运动\r\n";
            } 
            if (stu.remark == "") {
                str += "请填写备注\r\n";
            }  
            if (str != "") {
                alert(str);
            } else {
                alert("谢谢配合！");
            }

        }

        function handleSet() {
            let stu = {
                name: "袁浩哲",
                klass: 2,
                sex: 1,
                sports: [1,2],
                reamrk: "我是袁浩哲",
            }
            name.value = stu.name;
            klass.value = stu.klass;
            for (let v of sexes) {
                if (v.value = stu.sex) {
                    v.checked = true;
                }
            }

            // console.log(stu.sports.indexOf(3));

            for (let v of sports) {
                console.log(v.value);
                // 数组的indexOf()方法：判断值第一次出现的索引值
                if (stu.sports.indexOf(parseInt(v.value)) != -1) {
                    v.checked = true;
                } else {
                    v.checked = false;
                }
            }
            remarkObj.value = stu.reamrk;
        }
    </script>
</body>
</html>